<template>
  <div class="alarm-manage" >
    <div class="top" >
      <div class="query-form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="报警名称:">
            <el-input  placeholder="请输入报警名称" />
          </el-form-item>
          <el-form-item label="指标:">
            <el-select  placeholder="全部">
              <el-option label="全部" value="shanghai" />
              <el-option
                v-for="(item,index) in quotaIdSelectData"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <span style="height: 20px"><el-button type="primary" @click="handleClick">添加报警</el-button></span>

    </div>
    <el-scrollbar>
      <div style="overflow-x: hidden">
        <div class="content">
          <el-card v-for="(item, ind) in tableData"   :key="ind">
            <el-row>
              <el-col :span="6">{{item.quota ? item.quota.name : '--'}}</el-col>
              <el-col :span="12">{{item.name}}</el-col>
              <el-col :span="6">
                <span>
                  <el-icon @click="changeItem(item)" color="#409EFC" >
                     <edit></edit>
                  </el-icon>
                </span>
                <span>
                  <el-icon style="margin-left: 30px" @click="delItem(item)" color="#FF0000">
                     <delete/>
                  </el-icon>
                </span>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </div>
    </el-scrollbar>
    <el-dialog
      v-model="dialogVisible"
      @close="resetForm('quota')"
      width="500px"
      center
    >
      <template #title>
        <div
          class="dialog-title"
        >
          {{title}}
        </div>
      </template>
      <el-form
        :rules="rules"
        :model="form"
        ref="quota"
        label-width="100px"
      >
        <el-form-item
          prop="name"
          label="报警名称："
        >
          <el-input
            style="width:100%"
            placeholder="请输入报警名称"
            v-model="form.name"
            maxlength='20'
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="quotaId"
          label="报警指标："
        >
          <el-select
            v-model="form.quotaId"
            placeholder="请选择报警指标"
            size="small"
          >
            <el-option
              v-for="(item,index) in quotaIdSelectData"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          prop="webHook"
          label="web hook："
        >
          <el-input
            placeholder="请输入web hook"
            maxlength='200'
            v-model="form.webHook"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="报警阈值："
          required
        >
          <div style="display:flex">
            <div style="flex:1">
              <el-form-item prop="operator">
                <el-select
                  v-model="form.operator"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    label=">"
                    value=">"
                  ></el-option>
                  <el-option
                    label="<"
                    value="<"
                  ></el-option>
                  <el-option
                    label="="
                    value="="
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 10px"></div>
            <div style="flex:1">
              <el-form-item prop="threshold">
                <el-input
                  placeholder="请输入报警阀值"
                  v-model.number="form.threshold"
                  maxlength='5'
                  size="small"
                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          prop="level"
          label="报警级别："
        >
          <el-radio-group v-model="form.level">
            <el-radio :label="1">一般</el-radio>
            <el-radio :label="2">严重</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="沉默周期：" required>
          <div style="display:flex">
            <div style="flex:1">
              <el-form-item prop="cycle">
                <el-input
                  placeholder="请输入沉默周期"
                  v-model.number="form.cycle"
                  maxlength='5'
                  size="small"
                  onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                ></el-input>
              </el-form-item>
            </div>
            <div style="width: 20px"></div>
            <div style="flex:1">
              <el-form-item prop="time">
                <el-select
                  v-model="form.time"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="(item,index) in timeSelectData"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div
          class="dialog-footer"
        >
          <el-button
            @click="resetForm('quota')"
            size="small"
            class="butBox"
          >取 消</el-button>
          <el-button
            type="primary"
            @click="submitForm('quota')"
            size="small"
            class="butBox"
            style="margin-left: 30px;"
          >确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { alarm, delAlarm } from '@/api/alarm'
import {
  Edit,
  Delete
} from '@element-plus/icons-vue'
import { quota } from '@/api/quota'
interface timeSelect {
  label: string
  value: string
}
@Options({
  components: {
    Edit,
    Delete
  }
})
export default class deviceManage extends Vue {
  private tableData: any = []
  private quotaIdSelectData: Array<any> = []
  private total = 1
  // 是否新增
  private isAddPut = true
  private title = '添加报警'
  private formInline: {[index:string]:any} = {
    page: 1,
    pageSize: 20
  }

  form: Record<string, unknown> = {
    name: '',
    quotaId: '',
    operator: '',
    threshold: '',
    level: 1,
    cycle: '',
    webHook: '',
    time: ''
  }

  private dialogVisible = false

  private timeSelectData: timeSelect[] = [
    {
      label: '小时',
      value: '60'
    },
    {
      label: '分钟',
      value: '1'
    }
  ]

  private rules: any = {
    name: [{ required: true, message: '请输入指标名称', trigger: 'blur' }],
    unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
    subject: [{ required: true, message: '请输入报文主题', trigger: 'blur' }],
    valueKey: [
      { required: true, message: '请输入指标值字段', trigger: 'blur' }
    ],
    valueType: [
      { required: true, message: '请选择指标值字段类型', trigger: 'change' }
    ],
    snKey: [
      { required: true, message: '请输入设备识别码字段', trigger: 'blur' }
    ],
    webhook: [{ required: true, message: '请输入web hook', trigger: 'blur' }],
    referenceValue: [
      { required: true, message: '请输入安全值', trigger: 'blur' }
    ]
  }

  // 获取指标
  private async getQuotaList () {
    const data: any = await quota({
      page: 1,
      pageSize: 1000
    })
    this.quotaIdSelectData = [...data.items]
    console.log(this.quotaIdSelectData)
  }

  // 搜索
  private onSubmit () {
    this.formInline.page = 1
    this.getList()
  }

  // 修改报警
  private changeItem (item: any) {
    this.title = '修改报警'
    this.dialogVisible = true
    this.isAddPut = false
    if (item.cycle % 60 === 0) {
      item.time = '60'
      item.cycle = item.cycle / 60
    } else {
      item.time = '1'
    }
    this.$nextTick(() => {
      this.form = Object.assign({}, item)
    })
  }

  // 删除报警
  private async delItem (item: any) {
    const _self = this as any
    _self.$confirm('确认删除?', '', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(async () => {
      const data: any = await delAlarm(item.id)
      this.getList()
    }).catch((err:any) => {
      console.log(err)
      console.log('取消操作！')
    })
  }

  // 获取报警列表
  private async getList () {
    const data: any = await alarm({ ...this.formInline })
    this.tableData = [...data.items]
    this.total = data.counts
  }

  // 添加报警
  private handleClick () {
    this.dialogVisible = true
    const self = this as any
    self.form.time = '1'
    this.isAddPut = true
    this.title = '添加报警'
    this.$nextTick(() => {
      (this as any).$refs.quota.resetFields()
    })
  }

  resetForm (refId: any) {
    (this as any).$refs[refId].resetFields()
    this.dialogVisible = false
  }

  mounted () {
    this.getList()
    this.getQuotaList()
  }
}
</script>
<style lang="scss" scoped>
.alarm-manage{
  padding:20px;
}
.top{
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
}
.content{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  color: #20232a;
  font-size: 14px;
}
.el-card{
  --el-card-padding: 8px 30px;
  min-width: 48%;
  margin:5px 0;
}

</style>
